<template>
    <el-row>
      <el-col>
        <!-- 核心：用 @select 接管所有点击 -->
        <el-menu
          ref="sidebarMenu"
          :default-active="activeIndex"
          class="custom-sidebar"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          @select="handleSelect"
        >
          <!-- 一级菜单 -->
          <el-menu-item
            v-for="item in topLevelMenu"
            :key="item.index"
            :index="item.index"
          >
            <i :class="[item.icon, 'menu-icon']"></i>
            <span class="menu-title">{{ item.title }}</span>
          </el-menu-item>
  
          <!-- 子菜单 -->
          <el-submenu
            v-for="item in subMenuParents"
            :key="item.index"
            :index="item.index"
          >
            <template #title>
              <i :class="[item.icon, 'menu-icon']"></i>
              <span class="menu-title">{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.index"
              :index="child.index"
            >
              <i :class="[child.icon, 'submenu-icon']"></i>
              <span class="submenu-title">{{ child.title }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </template><script>
export default {
  data() {
    return {
      menu: [
        { title: '首页', icon: 'el-icon-s-home', index: '1', url: '/home/' },
        { title: '个人中心', icon: 'el-icon-user-solid', index: '2', url: '/home/Personal_Central' },
        { title: '用户', icon: 'el-icon-user', index: '3', url: '/home/User' },
        { title: '店家', icon: 'el-icon-s-shop', index: '4', url: '/home/store' },
        { title: '订单', icon: 'el-icon-tickets', index: '5', url: '/home/Order' },
        {
          title: '营销',
          icon: 'el-icon-s-marketing',
          index: '6',
          children: [
            { title: '品牌推荐', icon: 'el-icon-star-off', index: '6-1', url: '/home/sms/brand/index' },
            { title: '优惠券列表', icon: 'el-icon-s-ticket', index: '6-2', url: '/home/sms/coupon/index' },
          ]
        }
      ]
    }
  },
  computed: {
    // 顶级菜单（无子菜单）
    topLevelMenu() {
      return this.menu.filter(m => !m.children)
    },
    // 有子菜单的父级
    subMenuParents() {
      return this.menu.filter(m => m.children && m.children.length > 0)
    },
    // 当前路由对应的 index
    activeIndex() {
      const path = this.$route.path
      // 查找所有菜单项（包括子菜单）
      const allItems = [
        ...this.topLevelMenu,
        ...this.subMenuParents.flatMap(p => p.children)
      ]
      const match = allItems.find(item => item.url === path)
      return match ? match.index : '1'
    }
  },
  methods: {
    // 核心：@select 事件，Element UI 官方唯一支持方式
    handleSelect(index) {
      // 查找点击的菜单项
      const allItems = [
        ...this.topLevelMenu,
        ...this.subMenuParents.flatMap(p => p.children)
      ]
      const target = allItems.find(item => item.index === index)
      
      if (target && target.url) {
        // 只有有 url 的才跳转
        if (this.$route.path !== target.url) {
          this.$router.push(target.url).catch(err => {
            if (err.name !== 'NavigationDuplicated') throw err
          })
        }
      }
    }
  },
  watch: {
    // 路由变了，强制更新菜单高亮
    '$route.path'() {
      this.$nextTick(() => {
        if (this.$refs.sidebarMenu) {
          this.$refs.sidebarMenu.activeIndex = this.activeIndex
        }
      })
    }
  },
  // 组件创建时也同步一次
  created() {
    this.$nextTick(() => {
      if (this.$refs.sidebarMenu) {
        this.$refs.sidebarMenu.activeIndex = this.activeIndex
      }
    })
  }
}
</script><style scoped>
.el-row {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #304156 0%, #2c3e50 100%);
}

.custom-sidebar {
  border: none;
  min-height: 100vh;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.el-menu-item,
.el-submenu__title {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.menu-icon {
  margin-right: 12px;
  font-size: 18px;
  color: #bfcbd9;
}

.submenu-icon {
  margin-right: 10px;
  font-size: 14px;
  color: #8a9bb0;
}

.menu-title,
.submenu-title {
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: 14px;
}

.submenu-title {
  font-size: 13px;
  color: #8a9bb0;
}

.el-menu-item.is-active {
  background-color: rgba(64, 158, 255, 0.2) !important;
  border-left: 4px solid #409EFF;
  color: #409EFF !important;
}

.el-menu-item.is-active .menu-icon,
.el-menu-item.is-active .submenu-icon {
  color: #409EFF;
}

.el-menu--inline .el-menu-item {
  padding-left: 50px !important;
}

.el-menu-item {
  cursor: pointer;
}
</style>